<template>
  <ul>
    <li
      v-for="(item1,index1) in groups"
      :key="index1"
      class="nodeGroup"
    >
      <span class="group-icon" :style="{'background-image':'url('+item1.image+')'}"></span>
      <span class="group-title">{{item1.name}}</span>
      <span v-if="item1.expstate==1" class="group-right-icon" @click="groupClose(item1.name)"></span>
      <span v-else class="group-right-icon closed" @click="groupShow(item1.name)"></span>
      <template v-if="item1.expstate==1">
          <ul>
              <li
                v-for="(item,index) in item1.list"
                :key="index"
                class="nodeItem"
                :data-shape="item.shape"
                :data-type="item.type"
                :data-size="item.size"
                draggable
                @dragstart="handleDragstart"
                @dragend="handleDragEnd($event,item)"
                >
                <span class="pannel-type-icon" :style="{'background-image':'url('+item.image+')'}"></span>
                {{item.name}}
                </li>
          </ul>
      </template>
    </li>
  </ul>
</template>

<script>
import eventBus from "@/utils/eventBus";
import okSvg from "@/assets/icons/ok.svg";
import bgImg from "@/assets/bg.jpg"; 

export default {
  data() {
    return {
      page: null,
      command: null,
      offsetX: 0,
      offsetY: 0,
      groups:[
          {
            name:'测试节点',
            label:'测试节点',
            type:'group',
            image:'/static/img/nodes/group_test.svg',
            expstate:1,
            list: [
                    {
                    name: "测试节点",
                    label: "测试节点",
                    size: "170*34",
                    type: "node",
                    x: 0,
                    y: 0,
                    shape: "customNode",
                    color: "#1890ff",
                    image:
                        "https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg",
                    stateImage: okSvg,
                    inPoints: [[0, 0.5]],
                    outPoints: [[1, 0.5]]
                    },
                    {
                    name: "背景图片节点",
                    label: "背景图片节点",
                    size: "170*34",
                    type: "node",
                    x: 0,
                    y: 0,
                    shape: "customNode",
                    color: "#1890ff",
                    image:
                        "https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg",
                    stateImage: okSvg,
                    backImage: bgImg,
                    inPoints: [[0, 0.5]],
                    outPoints: [[1, 0.5]]
                    },
                    {
                    name: "双输出节点",
                    label: "双输出节点",
                    size: "170*34",
                    type: "node",
                    x: 0,
                    y: 0,
                    shape: "customNode",
                    color: "#1890ff",
                    image:
                        "https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg",
                    stateImage: okSvg,
                    inPoints: [[0, 0.5]],
                    outPoints: [[1, 0.4], [1, 0.6]]
                    },
                    {
                    name: "大型节点",
                    label: "大型节点",
                    size: "340*34",
                    type: "node",
                    x: 0,
                    y: 0,
                    shape: "customNode",
                    color: "#1890ff",
                    image:
                        "https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg",
                    stateImage: okSvg,
                    inPoints: [[0, 0.5]],
                    outPoints: [[1, 0.5]]
                    },
                    {
                    name: "动画开始节点",
                    label: "动画开始",
                    size: "170*34",
                    type: "node",
                    x: 0,
                    y: 0,
                    shape: "customNode",
                    color: "#1890ff",
                    image:
                        "https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg",
                    stateImage: okSvg,
                    inPoints: [[0, 0.5]],
                    outPoints: [[1, 0.5]],
                    isDoingStart: true
                    },
                    {
                    name: "动画结束节点",
                    label: "动画结束",
                    size: "170*34",
                    type: "node",
                    x: 0,
                    y: 0,
                    shape: "customNode",
                    color: "#1890ff",
                    image:
                        "https://gw.alipayobjects.com/zos/rmsportal/czNEJAmyDpclFaSucYWB.svg",
                    stateImage: okSvg,
                    inPoints: [[0, 0.5]],
                    outPoints: [[1, 0.5]],
                    isDoingEnd: true
                    }
                ]
          },
          {
            name:'审批流程',
            label:'审批流程',
            type:'group',
            image:'/static/img/nodes/group_approve.svg',
            expstate:0,
            list:[{
              name: "开始节点",
              label: "开始节点",
              size: "170*34",
              type: "node",
              x: 0,
              y: 0,
              shape: "customNode",
              color: "#1890ff",
              image:"/static/img/nodes/node_start.svg",
              stateImage: okSvg,
              inPoints: [[0, 0.5]],
              outPoints: [[1, 0.5]]
            },
            {
              name: "结束节点",
              label: "结束节点",
              size: "170*34",
              type: "node",
              x: 0,
              y: 0,
              shape: "customNode",
              color: "#1890ff",
              image:"/static/img/nodes/node_end.svg",
              stateImage: okSvg,
              inPoints: [[0, 0.5]],
              outPoints: [[1, 0.5]]
            },
            {
              name: "部门负责人",
              label: "部门负责人",
              size: "170*34",
              type: "node",
              x: 0,
              y: 0,
              shape: "customNode",
              color: "#1890ff",
              image:"/static/img/nodes/node_approve_1.svg",
              stateImage: okSvg,
              inPoints: [[0, 0.5]],
              outPoints: [[1, 0.5]]
            },
            {
              name: "自定义审批人",
              label: "自定义审批人",
              size: "170*34",
              type: "node",
              x: 0,
              y: 0,
              shape: "customNode",
              color: "#1890ff",
              image:"/static/img/nodes/node_approve_2.svg",
              stateImage: okSvg,
              inPoints: [[0, 0.5]],
              outPoints: [[1, 0.5]]
            },
            {
              name: "顺序审批人",
              label: "顺序审批人",
              size: "170*34",
              type: "node",
              x: 0,
              y: 0,
              shape: "customNode",
              color: "#1890ff",
              image:"/static/img/nodes/node_approve_3.svg",
              stateImage: okSvg,
              inPoints: [[0, 0.5]],
              outPoints: [[1, 0.5]]
            },
            {
              name: "发送邮件",
              label: "发送邮件",
              size: "170*34",
              type: "node",
              x: 0,
              y: 0,
              shape: "customNode",
              color: "#1890ff",
              image:"/static/img/nodes/node_approve_4.svg",
              stateImage: okSvg,
              inPoints: [[0, 0.5]],
              outPoints: [[1, 0.5]]
            },
            {
              name: "钉钉消息",
              label: "钉钉消息",
              size: "170*34",
              type: "node",
              x: 0,
              y: 0,
              shape: "customNode",
              color: "#1890ff",
              image:"/static/img/nodes/node_approve_5.svg",
              stateImage: okSvg,
              inPoints: [[0, 0.5]],
              outPoints: [[1, 0.5]]
            }
            ]
          }
      ]
      
    };
  },
  created() {
    this.bindEvent();
  },
  methods: {
    handleDragstart(e) {
      this.offsetX = e.offsetX;
      this.offsetY = e.offsetY;
    },
    handleDragEnd(e, item) {
      let data = {};
      Object.assign(data, item);
      data.offsetX = this.offsetX;
      data.offsetY = this.offsetY;
      var leftpanel=this.$el.parentNode;
      var canvasgraph=this.page.graph._cfg;
      if (this.page && e.x>leftpanel.clientWidth && e.x<=(leftpanel.clientWidth+canvasgraph.width) && e.y>42 && e.y<=(42+canvasgraph.height)) {
        const graph = this.page.graph;
        // const size = e.target.dataset.size.split("*");
        const xy = graph.getPointByClient(e.x, e.y);
        data.x = xy.x;
        data.y = xy.y;
        data.size = item.size.split("*");
        data.type = "node";
        this.command.executeCommand("add", [data]);
      }
    },
    groupShow(_name){
      var gpindex=this._getGroupIndex(_name);
      if(gpindex>-1){
        this.groups[gpindex].expstate=1;
      }
    },
    groupClose(_name){
      var gpindex=this._getGroupIndex(_name);
      if(gpindex>-1){
        this.groups[gpindex].expstate=0;
      }
    },
    _getGroupIndex(_name){
      var _gpindex=-1;
      if(this.groups==null) return _gpindex;
      if(this.groups.length==0) return _gpindex;
      for(var i=0;i<this.groups.length;i++){
        if(this.groups[i].name==_name){
          _gpindex=i;
          break;
        }
      }
      return _gpindex;
    },
    bindEvent() {
      eventBus.$on("afterAddPage", page => {
        this.page = page;
        this.command = page.command;
      });
    }
  }
};
</script>

<style scoped>
.itempannel {
  height: 100%;
  position: absolute;
  left: 0px;
  z-index: 2;
  background: #f7f9fb;
  width: 200px;
  padding-top: 8px;
  border-right: 1px solid #e6e9ed;
}
.itempannel .nodeGroup ul {
  padding: 0px;
  padding-left: 16px;
}
li.nodeGroup{
  color: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  line-height: 26px;
  padding-left: 8px;
  border: 1px solid rgba(0, 0, 0, 0);
  list-style-type: none;
}
li.nodeGroup .group-icon{
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  background-size: 16px 16px;
}
.group-title{
  width: 120px;
  display: inline-block;
}
.group-right-icon{
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  background-size: 20px 20px;
  background-image: url(/static/img/up.png);
  cursor: pointer;
  background-image: url('/static/img/up.png');
}
.group-right-icon.closed{
  background-image: url('/static/img/down.png');  
}
.group-right-icon.closed ul{
  display: none;
}
li.nodeItem{
  color: rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  max-width:120px;
  height: 28px;
  line-height: 26px;
  padding-left: 8px;
  border: 1px solid rgba(0, 0, 0, 0);
  list-style-type: none;
}
li.nodeItem:hover {
  background: white;
  border: 1px solid #ced4d9;
  cursor: move;
}

.nodeItem .pannel-type-icon {
  width: 16px;
  height: 16px;
  background-size:16px 16px;
  display: inline-block;
  vertical-align: middle;
}
</style>